<template>
    <div class="headerContain">
      <div class="header-li">
        <ul class="left-ul">
          <li>豆瓣</li>
          <li>读书</li>
          <li>电影</li>
          <li>音乐</li>
          <li>同城</li>
          <li>小组</li>
          <li>阅读</li>
          <li>FM</li>
          <li>时间</li>
          <li>豆品</li>
          <li>更多</li>
        </ul>
        <ul class="right-ul">
          <li>下载豆瓣客户端</li>
          <router-link tag="li" to="/login">登录</router-link>
          <router-link tag="li" to="register">注册</router-link>
        </ul>
      </div>
      <div class="header-context">
        <div class="header-search">
          <span class="dbds">豆瓣书评</span>
          <div style="margin: 15px;"  class="header-input">
            <el-input placeholder="书名、作者、ISBN" v-model="searchValue">
              <template slot="append"><el-button type="primary" icon="el-icon-search" @click="searchName">搜索</el-button></template>
            </el-input>
          </div>
          <span class="ndbd">豆瓣2019年度读书榜单</span>
          <div class="welcome">
            <span class="welcome-span">豆瓣欢迎您</span>
            <span>{{nameValue}}用户</span>
            <p @click="cleanValue">退出</p>
          </div>
        </div>
        <hr>
        <div class="header-book">
          <ul class="book-ul">
            <li>购书单</li>
            <li>电子图书</li>
            <li>豆瓣书店</li>
            <li>2019年度榜单</li>
            <li>2018书影音报告</li>
            <router-link to="middle/shoppingCar" tag="li"><i class="el-icon-shopping-cart-full"></i>购物车({{buyNumber}})</router-link>
          </ul>
        </div>
      </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'header',
  data () {
    return {
      showWelcome: false,
      searchValue: ''
    }
  },
  created () {
    // this.getWelcome()
  },
  methods: {
    searchName () {
      this.axios.get('BookCrud/findAll').then(res => {
        let search = res.data.filter(x => x.name === this.searchValue)
        if (search.length <= 0) {
          this.$message({
            showClose: true,
            message: '无法搜索您需要的图书',
            type: 'warning'
          })
        }
        let searchId = search[0].id
        this.$router.push({
          path: 'middle/bookInfo/' + searchId
        })
        this.searchValue = ''
      })
    },
    cleanValue () {
      this.$store.commit('clear')
      this.$router.push({
        path: '/middle'
      })
    }
  },
  computed: {
    ...mapState(['loginStatus', 'nameValue', 'buyNumber'])
  }
}
</script>

<style scoped>
li{
  list-style-type: none;
  cursor: pointer;
}
.header-li{
  background-color: #545652;
  width: 100%;
  height: 28px;
  color: #D5D5D5;
  line-height: 28px;
  font-size: 14px;
  overflow: hidden;
}
.left-ul li{
  float: left;
  padding: 0 12px;
}
.left-ul li:hover{
  color: white;
}
.right-ul li{
  padding: 0 12px;
  float: right;
  margin-top: -15px;
}
.right-ul li:hover{
  color: white;
}
.dbds{
  color: #614e3c;
  font-size: 35px;
  display: inline-block;
  margin: 15px 0 0 200px;
  font-weight: bold;
  cursor: pointer;
}
.ndbd{
  color: #22777C;
  font-weight: bold;
  margin: 0 50px;
  cursor: pointer;
}
.header-context{
  background-color: #F6F6F1;
}
.header-input{
  height: 20px;
  width: 500px;
  display: inline-block;
}
.header-book{
  height: 40px;
  width: 100%;
}
.book-ul{
  margin-left: 150px;
}
.book-ul li{
  float: left;
  padding: 0 12px;
  font-size: 14px;
  color: #614e3c;
}
.el-icon-shopping-cart-full{
  padding-right: 5px;
  font-size: 16px;
}
.book-ul li:hover{
  background-color: #614e3c;
  color: white;
}
.welcome{
  display: inline-block;
  color: #22777C;
  font-weight: bold;
}
.welcome-span{
  margin-right: 40px;
}
.welcome p {
  cursor: pointer;
}
</style>
